<template>
  <div class="list">
    <tmpHeader/>
    <div class="main">
      <div class="iheader">
            <Button type="info" @click="add" >新增远程会诊类型</Button>
        </div>        
      <div class="tabList">
        <Table stripe :columns="columns1" :data="list"></Table>
        <Page :total="count" :current="pageNo" :page-size="pageSize" style="text-align: center;padding-top: 15px" @on-change="loadPage"/>
      </div>
      <!-- model -->
      <Modal v-model="modalStatus" :loading="loading" :mask-closable="false" :title="`${['新增', '编辑'][type]}远程会诊类型`" @on-ok="Save" @on-cancel="Cancel">
        <div class="model">
          <div class="user">
            <span>门诊名称：</span>
            <input type="text" placeholder="请输入远程会诊类型名称" v-model="params.typeName">
          </div>
          <div class="user">
            <span>职称：</span>
            <Select v-model="params.titleId" style="width:150px;margin-right:4px;" @on-change='relationwx' clearable @on-clear='relationwx'>
              <Option
                v-for ="item in titleList"
                :value="item.dictType"
                :key="item.dictType"
                style='text-align:center;'
              >{{ item.dictName }}</Option>
            </Select>
          </div>
          <div class="user">
            <span>门诊价格：</span>
            <InputNumber :min='1' v-model="params.cost"></InputNumber>
          </div>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import tmpHeader from "@/pages/operation/contentmen/tmpHeader";
import api from "@/api/commonApi";
export default {
  components: {
    tmpHeader
  },
  data() {
    return {
      type: '', // '0'新增 '1' 编辑
      count: 0,
      pageNo: 1,
      pageSize: 10,
      loading: true,
      modalStatus: false,
      titleList: [],
      params: {
        id: '',
        titleId: "",
        typeName: "",
        cost: 1,
        createTime: null,
        updateTime: null,
        hospitalId: sessionStorage.getItem("hospitalId")
      },
      list: [],
      columns1: [
        { type: "index", title: "编号", width: 60, align: "center" },
        { key: "typeName", title: "名称", align: "center" },
        { key: "titleName", title: "职称", align: "center" },
        { key: "cost", title: "医事服务费价格（元）", align: "center" },
        {
          title:"操作",
          align:'center',
          render:(h, params) => {
            return h('a', {
              on: {
                click: () => {
                  this.edit(params.row)
                }
              }
            }, '编辑')
          }
        }
      ]
    };
  },
  created(){
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/operation/mechanism/index",
        title: "机构运营"
      },
      {
        path: "/index/operation/home",
        title: "机构配置管理"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    let doctor = localStorage.getItem("iremoteConsult");
    if (!doctor) {
      this.$Message.info("您还没有开通远程会诊,去开通");
      localStorage.setItem("homeIndex", 0);
      setTimeout(() => {
        this.functionJS.paramsNavgationTo(this, "homeinfo");
        // 公用方法
      }, 800);
    }
    this.getDataDoctorList();
    this.$axios.post(api.getTitle, {}).then(resp => {
      this.titleList = resp.data.object;
    })
  },
  methods: {
    //  新增
    add() {
      this.modalStatus = true;
      this.params.titleId = '';
      this.params.typeName = '';
      this.params.cost = 1;
      this.params.id = null;
      this.type = '0';
    },
    //  编辑
    edit(item) {
      this.type = '1';
      this.params.id = item.id;
      this.$axios.get(api.operateconsulttypenum + '/' + item.id).then(res => {
        this.modalStatus = true;
        this.params.titleId = res.data.object.titleId;
        this.params.typeName = res.data.object.typeName;
        this.params.cost = res.data.object.cost;
        this.params.updateTime = res.data.object.updateTime;
        this.params.createTime = res.data.object.createTime;
      });
    },
    // 取消
    Cancel() {
      this.modalStatus = false
    },
    // 修改成功
    Save() {
      let _params = this.params;
      let _message = '成功'
      let _url = ''
      if(this.type === '0') {
        _url = api.consulttypecreateone;
        _params.id = null;
        _params.updateTime = null;
        _params.createTime = null;
        _message = '添加成功';
      } else {
        _url = api.consulttypeupdate
        _message = '修改成功';
      }
      this.$axios.post(_url, _params).then(res => {
        if (res.data.success) {
          this.modalStatus = false;
          this.$Message.info(_message);
          this.getDataDoctorList();
        }
      });
    },
    // 加载门诊列表
    getDataDoctorList() {
      let datde = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        params: {
          hospitalId_EQ: sessionStorage.getItem('hospitalId')
        }
      }
      console.log(datde)
      this.$axios.post(api.operateconsulttypepage, datde).then(res => {
          if (res.data.code) {
            this.count = parseInt(res.data.object.count);
            this.list = res.data.object.list;
          }
        });
    },
    loadPage(index) {
      this.pageNo = index;
      this.getDataDoctorList()
    }
  }
};
</script>
<style lang="less" scoped>
  .list {
    width: calc(100% - 20px);
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    .main {
      width: 80%;
      margin: 0 auto;
      .iheader {
        width: 100%;
        margin: 10px auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
      .tabList {
        width: 100%;
        margin: 0 auto;
      }
    }
  }
  .model {
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 10px;
    .user {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 10px 0;
      span {
        width: 100px;
      }
      input {
        text-indent: 10px;
        flex: 1;
        border-radius: 4px;
        line-height: 30px;
        border: none;
        border: 1px solid #ddd;
        outline: none;
      }
    }
  }
</style>
